<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- Search Bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.company" 
          placeholder="单位名称"
          style="width: 160px; margin-left: 10px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>
 
      <!-- Data Table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        v-loading="loading"
      >
        <el-table-column prop="id" label="编号" width="100" align="center"/>
        <el-table-column prop="name" label="名称" width="150"/>
        <el-table-column prop="requirement" label="申请要求" width="150"/>
        <el-table-column prop="start_time" label="开始时间" width="150"/>
        <el-table-column prop="end_time" label="结束时间" width="150"/>
        <el-table-column prop="deadline" label="申请截至时间" width="180"/>
        <el-table-column prop="company" label="实习单位名称" width="180"/>
        <el-table-column prop="company_info" label="实习单位简介" width="180" show-overflow-tooltip/>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)"> 修改</el-button>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- Footer Section -->
      <div class="footer-section">
        <div class="pagination-info">
          第1到{{ filteredData.length  }}条，共{{ filteredData.length  }}条记录。
        </div>
        <div class="loading-text" v-if="loading">
          数据加载中，请稍后...
        </div>
      </div>
    </el-card>
 
    <!-- Edit Dialog -->
    <el-dialog 
      :title="isEdit ? '修改实习信息' : '新增实习信息'"
      v-model="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formRef" 
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="编号" prop="id" v-if="isEdit">
          <el-input v-model="form.id"  disabled></el-input>
        </el-form-item>
        <el-form-item label="实习名称" prop="name">
          <el-input v-model="form.name"  placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="requirement">
          <el-input 
            type="textarea"
            :rows="3"
            v-model="form.requirement"  
            placeholder="请输入申请要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker 
            v-model="form.start_time" 
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker 
            v-model="form.end_time" 
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请截止时间" prop="deadline">
          <el-date-picker 
            v-model="form.deadline" 
            type="date"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="company">
          <el-input v-model="form.company"  placeholder="请输入实习单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="company_info">
          <el-input 
            type="textarea"
            :rows="3"
            v-model="form.company_info"  
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
 
// Reactive state 
const loading = ref(true)
const filter = reactive({
  id: '',
  name: '',
  company: ''
})
 
const tableData = ref([
  {
    id: '4',
    name: '生产实习',
    requirement: '无挂科',
    start_time: '2022-01-02',
    end_time: '2023-02-28',
    deadline: '2023-01-01',
    company: '华为',
    company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市。'
  },
  {
    id: '5',
    name: '软件开发实习',
    requirement: '熟悉Java/Python，有项目经验者优先',
    start_time: '2023-06-01',
    end_time: '2023-08-31',
    deadline: '2023-05-15',
    company: '阿里巴巴',
    company_info: '阿里巴巴集团控股有限公司是中国的跨国科技公司，提供电子商务、零售互联网、科技和金融服务。'
  },
  {
    id: '6',
    name: '市场营销实习',
    requirement: '市场营销相关专业，良好的沟通能力',
    start_time: '2023-07-01',
    end_time: '2023-09-30',
    deadline: '2023-06-15',
    company: '腾讯',
    company_info: '腾讯控股有限公司是一家中国跨国企业集团和控股公司，其子公司专门从事各种与互联网相关的服务和产品。'
  }
])
 
const editDialogVisible = ref(false)
const isEdit = ref(false)
const formRef = ref(null)
const form = reactive({
  id: '',
  name: '',
  requirement: '',
  start_time: '',
  end_time: '',
  deadline: '',
  company: '',
  company_info: ''
})
 
const rules = reactive({
  name: [
    { required: true, message: '请输入实习名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  requirement: [
    { required: true, message: '请输入申请要求', trigger: 'blur' }
  ],
  start_time: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  end_time: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    { validator: validateEndTime, trigger: 'change' }
  ],
  deadline: [
    { required: true, message: '请选择申请截止时间', trigger: 'change' },
    { validator: validateDeadline, trigger: 'change' }
  ],
  company: [
    { required: true, message: '请输入实习单位名称', trigger: 'blur' }
  ]
})
 
// Computed properties 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (!filter.id  || item.id.includes(filter.id))  &&
      (!filter.name  || item.name.includes(filter.name))  &&
      (!filter.company  || item.company.includes(filter.company)) 
    )
  })
}) 
 
// Methods 
function handleSearch() {
  // Filtering is handled by computed property 
  ElMessage.success(' 搜索完成')
}
 
function resetSearch() {
  filter.id  = ''
  filter.name  = ''
  filter.company  = ''
}
 
function handleEdit(row) {
  isEdit.value  = true 
  Object.assign(form,  JSON.parse(JSON.stringify(row))) 
  editDialogVisible.value  = true 
}
 
function validateEndTime(rule, value, callback) {
  if (!value) {
    callback(new Error('请选择结束时间'))
  } else if (form.start_time  && new Date(value) < new Date(form.start_time))  {
    callback(new Error('结束时间不能早于开始时间'))
  } else {
    callback()
  }
}
 
function validateDeadline(rule, value, callback) {
  if (!value) {
    callback(new Error('请选择申请截止时间'))
  } else if (form.start_time  && new Date(value) > new Date(form.start_time))  {
    callback(new Error('申请截止时间不能晚于实习开始时间'))
  } else {
    callback()
  }
}
 
function handleDialogClosed() {
  formRef.value?.resetFields() 
  Object.assign(form,  {
    id: '',
    name: '',
    requirement: '',
    start_time: '',
    end_time: '',
    deadline: '',
    company: '',
    company_info: ''
  })
}
 
function submitForm() {
  formRef.value?.validate(valid  => {
    if (valid) {
      if (isEdit.value)  {
        // Edit mode - update data 
        const index = tableData.value.findIndex(item  => item.id  === form.id) 
        if (index !== -1) {
          tableData.value.splice(index,  1, { ...form })
          ElMessage.success(' 修改成功')
        }
      } else {
        // Add mode - insert data 
        const newId = tableData.value.length  > 0 
          ? Math.max(...tableData.value.map(item  => parseInt(item.id)))  + 1 
          : 1 
        tableData.value.unshift({ 
          ...form,
          id: newId.toString() 
        })
        ElMessage.success(' 新增成功')
      }
      editDialogVisible.value  = false 
    }
  })
}
 
// Lifecycle hooks 
onMounted(() => {
  // Simulate data loading 
  setTimeout(() => {
    loading.value  = false 
  }, 1500)
})
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.footer-section {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
 
.pagination-info {
  color: #909399;
  font-size: 13px;
}
 
.loading-text {
  color: #606266;
  font-size: 13px;
  font-style: italic;
}
 
.el-button--text {
  color: #409EFF;
  padding: 0;
}
 
/* Dialog form styles */
.el-form-item {
  margin-bottom: 18px;
}
 
.el-date-editor, .el-input, .el-textarea {
  width: 100%;
}
 
/* Table cell styles */
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>